<template>
  <div class="box">
    <!-- 视频 -->
    <div class="items_box">
      <div class="slide" v-for="item, index in props.allArr" :key="index" ref="op" @touchstart.stop="TouchStart"
        @touchmove.stop="TouchMove" @touchend.stop="TouchEnd" @click="stop">
        <a rel="external nofollow">
          {{ index }}
          <video :src="item.Video.videoPath" :poster="item.Video.videoCover" loop class="video"
            :autoplay="index === 0"></video>
        </a>
        <!-- 内容 -->
        <div class="title">
          <div class="name" :key="index">@{{ item.Video.userNickname }}</div>
          <div class="title1" :key="index">{{ item.Video.videoDesc }}</div>
        </div>
        <!-- 搜索 -->
        <search_icon @ss="ss" position="right" />
        <!-- 头像 -->
        <div class="sculpture" @click="sculpture(item.Video.userId)">
          <img :src="'http://43.138.15.137:3000' + item.Video.userAvatar" alt="" @error="userAvatarError">
        </div>
        <!-- 爱心 -->
        <love_icon :item="item" width="22" @love="love" />
        <!-- 信息 -->
        <message_icon @message="message(item.Video.videoId)" width="34" />
        <!-- 信息数量 -->
        <span class="number1">{{ item.WSLCNum.commentNum }}</span>
        <!-- 分享 -->
        <share_icon @share="share" />
        <!-- 分享数量 -->
        <span class="number2">{{ item.WSLCNum.shareNum }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
const emit = defineEmits(['ss', 'love', 'message', 'share', 'sculpture'])
// 爱心
import love_icon from './icon/loveNum-icon.vue'
// 搜索
import search_icon from './icon/search-icon.vue'
// 分享
import share_icon from './icon/share-icon.vue'
// 评论
import message_icon from './icon/message-icon.vue'
//接受父级组件传过来的数据源
const props = defineProps({
  allArr: {
    type: Array
  },
})

//轮播图高度
const bannerHeight = ref(0)
//触摸开始的点的横坐标
const StartPoint = ref(0)
//触摸结束的点的横坐标
const EndPoint = ref(0)
//StartPoint与EndPoint的差值
const MoveLength = ref(0)
//当前轮播图的索引
const CurrentImg = ref(0)
const video = document.getElementsByClassName('video')

const ss = () => {
  emit('ss')
}

const love = (val) => {
  let params = {
    userId: val.userId,
    videoId: val.videoId
  }
  emit('love', params)
}
const message = (videoId) => {
  let params = {
    videoId
  }
  emit('message', params)
}
const share = () => {
  emit('share')
}
const sculpture = (userId) => {
  let params = {
    userId
  }
  emit('sculpture', params)
}

// 头像错误值处理
function userAvatarError(event) {

  let img = event.srcElement
  img.src = 'src/assets/avatar/default.png'
  // 防止当原图链接和默认图片链接都失效时，会再次调用失败的方法，就出现了无限循环（闪图）的问题
  img.onerror = null
}

// 点击停止或者播放
async function stop() {
  // 如果是暂停
  if (video[CurrentImg.value].paused) {
    video[CurrentImg.value].play()
    // 关闭静音
    video[CurrentImg.value].muted = false
    // 如果是开始
  } else {
    video[CurrentImg.value].pause()
    // 打开静音
    video[CurrentImg.value].muted = true
  }
}
function TouchStart(event) {
  //获取触摸的开始点
  StartPoint.value = event.changedTouches[0].pageY

}
function TouchMove(event) {
  //获取触摸的结束点
  EndPoint.value = event.changedTouches[0].pageY

}
function TouchEnd() {
  Jump()
}
// 判断滑动距离是否超过30%，超过则跳转下一张，否则不跳转
function Jump() {
  const currentimg = document.getElementsByClassName('slide')

  if (EndPoint.value) {
    // 否则就是滑动距离等于开始点-结束点
    MoveLength.value = StartPoint.value - EndPoint.value

  } else {
    return
  }
  //获取轮播图的高度
  bannerHeight.value = currentimg[0].offsetHeight

  //滑动超过轮播图高度的百分之30并且，则跳转下一张，否则不跳转
  if (MoveLength.value > 0) {
    if (MoveLength.value > 50) {

      CurrentImg.value++

      currentimg[0].style.marginTop = -CurrentImg.value * bannerHeight.value + 'px'
      MoveLength.value = 0
      EndPoint.value = 0

    }
  } else {
    if (-50 > MoveLength.value) {
      CurrentImg.value--

      currentimg[0].style.marginTop = -CurrentImg.value * bannerHeight.value + 'px'
    }
  }    // 就开始
  for (let i = 0; i < video.length; i++) {
    video[i].pause()
    video[i].muted = true
  }
  video[CurrentImg.value].play()
  video[CurrentImg.value].muted = false
}
</script>

<style lang="scss" scoped>
$width: 100%;
$height: 100%;

.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  &::-webkit-scrollbar {
    display: none;
  }

  .items_box {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: auto;

    .slide {
      position: relative;
      width: 100vw;
      height: 100vh;


      .video {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -100px;
        width: 100%;
        height: 300px;
      }

      .title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 94%;
        height: 170px;
        // background-color: red;
        margin-left: 3%;
        font-size: 16px;
        color: #fff;

        .name {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 20px;
        }

        .title1 {
          position: absolute;
          top: 0;
          left: 0;
          margin-top: 25px;
          width: 85%;
          height: 80px;
        }
      }
    }
  }
}

.number1,
.number2 {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 25px;
  font-size: 12px;
  color: #fff;
  z-index: 5;
}

// 头像
.sculpture {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  margin-bottom: 285px;
  margin-right: 10px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #fff;
  z-index: 5;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: $width;
    height: $height;
  }
}

// 信息数量
.number1 {
  bottom: 115px;
}

// 分享
.share {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: 70px;
  margin-right: 17px;
  width: 34px;
  height: 34px;
  z-index: 5;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 3px solid #fff;
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin-top: 9px;
    border-radius: 50%;
    border: 3px solid #fff;
  }

  .line {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 9px;
    margin-top: 10px;
    width: 12px;
    height: 3px;
    background-color: #fff;
    transform: rotate(-30deg);
  }

  .line1 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 13px;
    margin-bottom: 10px;
    width: 13px;
    height: 3px;
    background-color: #fff;
    transform: rotate(30deg);
  }

  .yuan {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 3px solid #fff;
  }
}

// 分享数量
.number2 {
  bottom: 50px;
}
</style>
